<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}">联系我们</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <header th:replace="fragments/header :: header"></header>

    <main class="container">
        <h1 th:text="${title}" style="font-size: 36px;"></h1>
        <div class="contact-info">
            <p style="font-size: 24px;">地址：<span th:text="${address}" style="font-size: 20px;"></span></p>
            <p style="font-size: 24px;">联系电话：<span th:text="${phone}" style="font-size: 20px;"></span></p>
            <p style="font-size: 24px;">工作时间：周一至周日 09:00-18:00</p>
            <img th:src="@{/images/VCG联系我们.jpg}" alt="联系图片" style="width: 100%; height: auto; border-radius: 10px; margin-top: 20px; border: 2px solid #ddd;">
        </div>
    </main>

    <footer th:replace="fragments/footer :: footer"></footer>
    <script>
        function setMainPadding() {
            const footer = document.querySelector('footer');
            const main = document.querySelector('main.container');
            const footerHeight = footer.offsetHeight;
            main.style.paddingBottom = footerHeight + 'px';
        }

        // 页面加载完成时设置
        window.addEventListener('load', setMainPadding);
        // 窗口大小改变时重新设置
        window.addEventListener('resize', setMainPadding);
    </script>
</body>
</html>